<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords"
	content="carousel theme, free templates, image carousel, darkgray, pixelated background, templatemo, CSS, HTML" />
<meta name="description"
	content="Carousel Theme with darkgray background - free CSS template provided by templatemo.com" />
<link href="css/content/templatemo_style.css" rel="stylesheet"
	type="text/css" />
<link href="css/content/ddsmoothmenu.css" rel="stylesheet"
	type="text/css" />

</head>

<body id="home1">

	<div id="templatemo_header_wrapper">

		<div id="templatemo_menu" class="ddsmoothmenu">
			<ul>

			</ul>
			<br style="clear: left" />
		</div>
		<!-- end of templatemo_menu -->
		<div class="cleaner"></div>
	</div>
	<!-- END of templatemo_header_wrapper -->
	<div id="templatemo_slider">
		<!-- This is the container for the carousel. -->
		<div id="carousel1"
			style="width: 100%; height: 280px; background: none; overflow: scroll; margin-top: 20px; left: 15%;">
			<a href="http://www.cssmoban.com/" rel="lightbox"><img
				class="cloudcarousel" src="images/slider/01.jpg"
				alt="CSS Templates 1" title="Website Templates 1" /></a> <a href="#"
				rel="lightbox"><img class="cloudcarousel"
				src="images/slider/02.jpg" alt="CSS Templates 2"
				title="Website Templates 2" /></a> <a href="#" rel="lightbox"><img
				class="cloudcarousel" src="images/slider/03.jpg"
				alt="CSS Templates 3" title="Website Templates 3" /></a> <a href="#"
				rel="lightbox"><img class="cloudcarousel"
				src="images/slider/04.jpg" alt="CSS Templates 4"
				title="Website Templates 4" /></a> <a href="#" rel="lightbox"><img
				class="cloudcarousel" src="images/slider/05.jpg"
				alt="Flash Templates 1" title="Flash Templates 1" /></a> <a
				href="#page/2" rel="lightbox"><img class="cloudcarousel"
				src="images/slider/06.jpg" alt="Flash Templates 2"
				title="Flash Templates 2" /></a> <a href="#page/3" rel="lightbox"><img
				class="cloudcarousel" src="images/slider/07.jpg"
				alt="Flash Templates 3" title="Flash Templates 3" /></a> <a
				href="#page/4" rel="lightbox"><img class="cloudcarousel"
				src="images/slider/08.jpg" alt="Flash Templates 4"
				title="Flash Templates 4" /></a>
		</div>

		<!-- Define left and right buttons. -->
		<div style="margin-left: 50%;">
			<input id="slider-left-but" type="button" value="" /> <input
				id="slider-right-but" type="button" value="" />
		</div>
	</div>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/content/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/content/showhide.js"></script>
	<script type="text/JavaScript" src="js/content/jquery.mousewheel.js"></script>
	<script type="text/javascript" src="js/content/ddsmoothmenu.js"></script>

	<script type="text/javascript">
		ddsmoothmenu.init({
			mainmenuid : "templatemo_menu", //menu DIV id
			orientation : 'h', //Horizontal or vertical menu: Set to "h" or "v"
			classname : 'ddsmoothmenu', //class added to menu's outer DIV
			contentsource : "markup" //"markup" or ["container_id", "path_to_menu_file"]
		})
	</script>

	<!-- Load the CloudCarousel JavaScript file -->
	<script type="text/JavaScript" src="js/content/cloud-carousel.1.0.5.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {

			// This initialises carousels on the container elements specified, in this case, carousel1.
			$("#carousel1").CloudCarousel({
				reflHeight : 40,
				reflGap : 2,
				titleBox : $('#da-vinci-title'),
				altBox : $('#da-vinci-alt'),
				buttonLeft : $('#slider-left-but'),
				buttonRight : $('#slider-right-but'),
				yRadius : 30,
				xPos : 480,
				yPos : 32,
				speed : 0.15,
			});
		});
	</script>
</body>
</html>